// 引入变量和全局样式
@use "var.scss" as *;
@use "global.scss" as *;
@font-face {
    font-family: "方正楷体简体";
    src: url("../assets/fonts/方正楷体简体.ttf");
    font-weight: normal;
    font-style: normal;
}

// 外部大容器
.container {
    width: 100%;
    height: 100%;
    margin: 1rem 0;
}

// 单个菜单容器
.menu-container {
    width: 100%;
    height: 100%;
    //   padding-left: 1.5rem;
    border-left: skyblue solid 0.3rem;
}

// 菜单小容器
.menu-item-container {
    position: relative;
    width: 100%;
    height: 100%;
    font-weight: 700;
    line-height: 1.5;
    .menu-name {
        padding: 1.5rem;
    }
    span {
        color: #ccc;
        width: 100%;
        height: 100%;
    }
    a {
        width: 100%;
        height: 100%;
        font-family: "方正楷体简体";
        position: relative;
        font-size: 2rem;
        color: black;
        border: none;
        outline: 0;
        text-decoration: none;
        overflow-wrap: break-word;
        word-wrap: break-word;
        transition: all 0.2s ease-in-out 0s;
        cursor: pointer;
    }
    a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        /* 虚线距离文本的距离 */
        width: 100%;
        border-bottom: 1px dashed #b9b4b4;
        /* 虚线颜色和样式 */
    }
    a:hover {
        color: skyblue;
    }
}

.menu-item-container::before {
    z-index: 5;
    content: "";
    position: absolute;
    left: -0.65rem;
    top: 50%;
    /* 将小圆垂直居中 */
    transform: translateY(-50%);
    width: 1rem;
    /* 小圆的直径 */
    height: 1rem;
    border-radius: 50%;
    /* 使元素呈圆形 */
    border: 0.1rem solid skyblue;
    background-color: #fff;
    /* 空心圆的颜色和宽度 */
}

// 一行文章
.article-container {
    position: relative;
    width: 95%;
    height: 100%;
    padding: 0.5rem 0rem 0.5rem 1.5rem;
    cursor: pointer;
    .date {
        width: 100%;
        height: 100%;
        font-size: 1rem;
        color: #575252;
    }
    .title {
        width: 100%;
        height: 100%;
        font-size: 1.5rem;
        color: #e9546b;
    }
    .title:hover {
        color: skyblue;
    }
}

.article-container::before {
    z-index: 5;
    content: "";
    position: absolute;
    left: -0.6rem;
    top: 50%;
    /* 将小圆垂直居中 */
    transform: translateY(-50%);
    width: 0.8rem;
    /* 小圆的直径 */
    height: 0.8rem;
    border-radius: 50%;
    /* 使元素呈圆形 */
    border: 0.1rem solid skyblue;
    background-color: #fff;
    /* 空心圆的颜色和宽度 */
}

.day-mode .article-container::before {
    background-color: #fff;
    color: #21252b;
}

.night-mode .article-container::before {
    background-color: #21252b;
    color: #ffffff;
}

.day-mode .menu-item-container::before {
    background-color: #fff;
    color: #21252b;
}

.night-mode .menu-item-container::before {
    background-color: #21252b;
    color: #ffffff;
}
